<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap5 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        #img{
           width: 40%;
        }
    </style>
</head>
<body>

<div class="offcanvas offcanvas-start " tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<!--    <div class="offcanvas-header">-->
<!--        <h5 class="offcanvas-title" id="offcanvasExampleLabel">个人资料</h5>-->

<!--    </div>-->
    <div class="offcanvas-body">

        <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                基本信息
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">学校</a></li>
                <li><a class="dropdown-item" href="#">学号</a></li>
                <li><a class="dropdown-item" href="#">姓名</a></li>
                <li><a class="dropdown-item" href="#">性别</a></li>
            </ul>
        </div>
<!--        <div>-->
<!--            个人信息-->
<!--        </div>-->
    </div>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand -->
    <a class="navbar-brand"  data-bs-toggle="offcanvas" href="#offcanvasExample"href="#">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp个人信息</a>

    <!-- Links -->
    <ul class="navbar-nav mx-auto" >
        <li class="nav-item " >
            <a class="nav-link" href="#">健康打卡</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">&nbsp&nbsp&nbsp临时出入审批</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">&nbsp&nbsp&nbsp返校申请</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">&nbsp&nbsp&nbsp校历</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                &nbsp&nbsp&nbsp&nbsp&nbsp校园卡
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">查询</a>
                <a class="dropdown-item" href="#">充值</a>
                <a class="dropdown-item" href="#">挂失</a>
            </div>
        </li>
    </ul>
</nav>
<br>

<div class="container" id="img">
    <!-- 轮播 -->
    <div id="demo" class="carousel slide" data-bs-ride="carousel">

        <!-- 指示符 -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
        </div>

        <!-- 轮播图片 -->
        <div class="carousel-inner ">
            <div class="carousel-item active">
                <img src="/web/imgs/1.jpg" class="d-block"  >
            </div>
            <div class="carousel-item">
                <img src="/web/imgs/2.jpg" class="d-block">
            </div>
            <div class="carousel-item">
                <img src="/web/imgs/3.jpg" class="d-block">
            </div>
            <div class="carousel-item">
                <img src="/web/imgs/4.jpg" class="d-block" >
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</div>
<!--尝试-->
</body>
</html>